<template>
  <div class="customerService-box-outer">
    <!-- 在线客服端 -->
    <div class="customerService-box">
      <div class="customer-list">
        <div class="search-content">
          <el-input
            size="small"
            v-model="searchInput"
            placeholder="搜索"
            clearable
          >
            <template #prefix>
              <el-icon class="el-input__icon"><Search /></el-icon>
            </template>
          </el-input>
        </div>
        <ul class="customer-list-content scrollbar-class">
          <li
            :class="{ 'active-li': item.tokenId === curCustomer?.tokenId }"
            @click="chooseCustomer(item)"
            v-for="item in computedCustomerList"
            :key="item.tokenId"
          >
            <img src="@/assets/image/user.png" class="avatar" />
            <div class="customer-item-info ml-4">
              <div class="info-left">
                <p class="info-left-name text-overflow-oneLine">客户({{ item.tokenId }})</p>
                <p class="info-left-content text-overflow-oneLine">
                  {{
                    lastMessage(item.infoArr)?.messageType === "img"
                      ? "[图片]"
                      : lastMessage(item.infoArr)?.content
                  }}
                </p>
              </div>
              <div class="info-right">
                <p class="info-right-time info-left-content">
                  {{ (lastMessage(item.infoArr)?.time ?? "").slice(10, -3) }}
                </p>
              </div>
            </div>
            <p v-if="!item.isRead" class="info-right-message-count">
              <!-- {{ lastMessage(item.infoArr)?.messageCount }} -->
            </p>
          </li>
        </ul>
      </div>
      <div class="box" v-if="curCustomer" @click="handleClickBox">
        <div class="title">
          <span class="title-text ml-24">客户</span>
        </div>
        <div
          ref="contentRef"
          class="content-info"
        >
        <div
            v-show="!curCustomer.isAll && !loadingDetail"
            class="click-more info-tips mb-16"
            @click="handleClickMore"
          >
            点击加载更多
          </div>
          <div
            v-show="loadingDetail"
            class="info-tips mb-16"
          >
            加载中...
          </div>
          <div v-show="curCustomer.isAll && !loadingDetail" class="info-tips mb-16">
            无更多消息...
          </div>
          <div
            class="content-info-item"
            v-for="(item, index) in curCustomer?.infoArr || []"
            :key="index"
          >
            <div class="info_r info_default" v-if="item.type == 'leftinfo'">
              <img src="@/assets/image/user.png" class="avatar" />
              <div class="info_r_content">
                <p class="robot-name">客户</p>
                <div class="con_r con_text">
                  <!-- <div
                  class="img-box"
                  v-if="item.messageType === 'img'"
                  v-html="item.content"
                ></div> -->
                  <el-image
                    :teleported="true"
                    v-if="item.messageType === 'img'"
                    style="width: 200px; height: 100px"
                    :src="item.content"
                    :preview-src-list="[item.content]"
                    fit="cover"
                  />
                  <div
                    class="pedding-text"
                    v-else-if="item.messageType === 'pedding'"
                  >
                    <el-icon class="is-loading">
                      <Loading />
                    </el-icon>
                  </div>
                  <span v-else class="con_l">{{ item.content }}</span>
                  <div v-for="(item2, index) in item.question" :key="index">
                    <div
                      class="con_que"
                      @click="clickRobot(item2.content, item2.id)"
                    >
                      <div class="question-msg">
                        {{ item2.index }}
                        {{ item2.content }}
                      </div>
                    </div>
                  </div>
                </div>
                <div v-if="item.messageType !== 'pedding'" class="time_r">
                  {{ item.time }}
                </div>
              </div>
            </div>

            <div class="info_l" v-if="item.type == 'rightinfo'">
              <div class="info_l_content">
                <div class="con_l con_text">
                  <!-- <div
                  class="img-box"
                  v-if="item.messageType === 'img'"
                  v-html="item.content"
                ></div> -->
                  <el-image
                    :teleported="true"
                    v-if="item.messageType === 'img'"
                    style="width: 200px; height: 100px"
                    :src="item.content"
                    :preview-src-list="[item.content]"
                    fit="cover"
                  />
                  <span v-else>{{ item.content }}</span>
                </div>
                <div class="time_l">{{ item.time }}</div>
              </div>
              <img class="avatar" src="@/assets/image/robot.jpg" alt />
            </div>
            <div class="info-tips" v-if="item.type == 'tips'">
              {{ item.content }}
            </div>
          </div>
        </div>
        <!-- <span class="messag-loading" v-show="loading">消息发送中</span> -->
        <div class="common-info">
          <div
            class="common-item"
            @click="clickRobot(item.content, item.id)"
            v-for="item in robotQuestion"
            :key="item.id"
          >
            {{ item.title }}
          </div>
        </div>
        <ul class="tool-bar">
          <ChooseEmotion @getEmo="chooseEmo" />
          <img src="@/assets/image/SVG/picture.svg"  @click="chooseImg()" alt class="svg-icon mgl-16" />
          <!-- <svg-icon
            @click="chooseImg()"
            class="mgl-16"
            iconName="icon-tupian"
          ></svg-icon> -->
        </ul>

        <div class="setproblem">
          <el-input
            v-model="customerText"
            @keyup.enter="sentMsg()"
            style="
              height: 120px;
              width: 100%;
              resize: none;
              padding-right: 80px;
              outline: none;
              border-color: #ccc;
              border-radius: 5px;
            "
            resize="none"
            :rows="5"
            maxlength="200"
            type="textarea"
            placeholder="请输入（200字以内）"
          />
          <el-button @click="sentMsg()" type="primary">发 送</el-button>
        </div>
      </div>
      <div class="box-noselect" v-else>
        <span>暂无消息，请选择用户对象</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref, nextTick, onBeforeUnmount, computed } from "vue";
import ChooseEmotion from "../customerService/ChooseEmotion.vue";
import { Loading, Search } from "@element-plus/icons-vue";
import { uploadImg, queryChatList } from "@/utils/api/customerService/index";
import { useRoute, useRouter } from "vue-router";
import EventBus from "@/utils/eventBus.js";
definePageMeta({
  ssr: false // 关闭 SSR，启用 CSR
});
const route = useRoute();
const currentId = route.query?.user_id ?? "";
const searchInput = ref("");
const curCustomer = ref(); //当前聊天用户
const contentRef = ref();
const computedCustomerList = computed(() => {
  let curSearch = searchInput.value.trim();
  if (curSearch) {
    return customerList.value.filter((dd) => dd.name.indexOf(curSearch) > -1);
  } else {
    return customerList.value;
  }
});
// const loading = ref(false);
const getTodayTime = () => {
  // 获取当前时间
  var day = new Date();
  let seconds = day.getSeconds();
  if (seconds < 10) {
    seconds = "0" + seconds;
  } else {
    seconds = seconds;
  }
  let minutes = day.getMinutes();
  if (minutes < 10) {
    minutes = "0" + minutes;
  } else {
    minutes = minutes;
  }
  let time =
    day.getFullYear() +
    "-" +
    (day.getMonth() + 1) +
    "-" +
    day.getDate() +
    " " +
    day.getHours() +
    ":" +
    minutes +
    ":" +
    seconds;
  return time;
};
const customerList = ref([]);
const peddingObj = {
  type: "leftinfo",
  time: getTodayTime(),
  name: "robot",
  content: "",
  question: [],
  messageType: "pedding",
};
const robotQuestion = [
  { id: 1, title: "欢迎语", content: "您好，欢迎来到AISEO,AISEOWORD是成都柳暗星河科技有限公司旗下品牌，致力于一站式解决网络推广中的各种难题", index: 1 },
  { id: 2, title: "AISEO功能", content: "AISEOWORD为用户提供文案撰写、SEO定制、软文推广、网站优化和网站联运五大服务，您也可以描述具体问题，我们将为您定制专属服务方案。", index: 2 },
];
const robotAnswer = [
  {
    id: 1,
    content: "AISEO可能是。。。",
    index: 1,
  },
  { id: 2, content: "AISEO可以做。。。", index: 2 },
];
// const infoArr = ref([
//   {
//     type: "leftinfo",
//     time: getTodayTime(),
//     name: "robot",
//     content: `您好，欢迎使用AISEO，为保证账户安全，在会话过程中请勿透露您的账号、密码。`,
//     question: [],
//     messageType: "txt",
//   },
// ]);
// 选择表情
const chooseEmo = (cur) => {
  customerText.value += cur;
};
// 用户发送消息
const customerText = ref("");
let timer = null;
const endMsg = () => {
  let happyEnding = {
    type: "leftinfo",
    time: getTodayTime(),
    content: "会话结束",
    question: [],
    messageType: "txt",
  };
  curCustomer.value.infoArr.push(happyEnding);
  clearInterval(timerInterVal);
  nextTick(() => {
    contentRef.value?.scrollTo({
      top: contentRef.value.scrollHeight,
      behavior: "smooth",
    });
  });
  socket.close();
};
const networkErroshibrMsg = () => {
  clearTimeout(timer);
  let happyEnding = {
    type: "leftinfo",
    time: getTodayTime(),
    content: "连接出错。。。",
    question: [],
    messageType: "txt",
  };
  //   infoArr.value.push(happyEnding);
  curCustomer.value.infoArr[curCustomer.value.infoArr.length - 1] = happyEnding;
  nextTick(() => {
    contentRef.value?.scrollTo({
      top: contentRef.value.scrollHeight,
      behavior: "smooth",
    });
  });
};
// 用户发送消息
const sentMsg = () => {
  if (!window.WebSocket) {
    return;
  }
  let text = customerText.value.trim();
  if (text != "") {
    // var obj = {
    //   type: "rightinfo",
    //   time: getTodayTime(),
    //   content: text,
    //   messageType: "txt",
    // };
    // if (curCustomer.value.infoArr[curCustomer.value.infoArr.length - 1].messageType === "pedding") {
    //   curCustomer.value.infoArr[curCustomer.value.infoArr.length - 1] = obj;
    // }else{
    // curCustomer.value.infoArr.push(obj);
    // }
    appendRobotMsg(customerText.value);
    nextTick(() => {
      contentRef.value?.scrollTo({
        top: contentRef.value.scrollHeight,
        behavior: "smooth",
      });
    });
  }
};
const showTimer = () => {
  timer = setTimeout(() => {
    endMsg();
  }, 1000 * 60);
};
const appendRobotMsg = (text) => {
  text = text.trim();
  let answerText = "";
  let flag;
  for (let i = 0; i < robotQuestion.length; i++) {
    if (robotQuestion[i].content === text) {
      flag = true;
      answerText = robotAnswer.find(
        (dd) => dd.id == robotQuestion[i].id
      ).content;
      break;
    }
  }
  customerText.value = "";
  sendMsgToServe({
    message: text,
    messageType: "txt",
    mode: "single",
    receive_id: curCustomer.value.tokenId, //用户类型
    type: "chat",
    sendId: currentId
  });
};
const sentMsgById = (val, id) => {
  // 发送给后端
  let obj_r = {
    message: val,
    messageType: "text",
    mode: "single",
    receive_id: curCustomer.value.tokenId, //用户类型
    type: "chat",
    sendId: currentId
  };
  sendMsgToServe(obj_r);
};
// 点击快速回答
const clickRobot = (val, id) => {
  sentMsgById(val, id);
};
let socket = null;
let timerInterVal = null;
const initWebsoket = (callback) => {
  if (!window.WebSocket) {
    window.WebSocket = window.MozWebSocket;
  }
  if (window.WebSocket) {
        // 获取当前页面的完整URL  
var currentURL = window.location.href;  
  
  // 使用URL API解析URL  
  var urlObject = new URL(currentURL);  
    
  // 获取协议部分（例如：http: 或 https:）  
  var protocol = urlObject.protocol;  
  const { public: { websoketChatUrl } } = useRuntimeConfig()
  if (protocol === 'http:') {
    socket = new WebSocket(`ws://${websoketChatUrl}/ws`);
  }
  if (protocol === 'https:') {
    socket = new WebSocket(`wss://${websoketChatUrl}`);
    
  }
    socket.onmessage = function (event) {
      if (!event) return;
      try {
        let data = JSON.parse(event.data || "{}");
        /*
          判断条件 1. 排除null可能性
                   2. 确保数据是对象或数组
      */
        if (data && typeof data === "object") {
          if (data?.type === "chat") {
            let obj = {
              type: data?.messageType === "tips" ? "tips" : "leftinfo",
              time: getTodayTime(),
              name: "robot",
              content: data?.message ?? "",
              question: [],
              messageType: data?.messageType ?? "text",
            };
            // 如果是聊天需要判断并生成聊天列表
            let curId = data.sendId;
            let tempCustomer = customerList.value.find(
              (ee) => ee.tokenId === curId
            );
            if (tempCustomer) {
              tempCustomer.infoArr.push(obj);
              tempCustomer.isRead = false;
              customerList.value = customerList.value.filter(
                (dd) => dd.tokenId != curId
              );
              customerList.value.unshift(tempCustomer);
            } else {
              customerList.value.unshift({
                name: `客户(${curId})`,
                tokenId: curId,
                infoArr: [obj],
                isRead: false,
              });
            }
            // if (
            //   curCustomer.value.infoArr[curCustomer.value.infoArr.length - 1].messageType === "pedding"
            // ) {
            //   curCustomer.value.infoArr[curCustomer.value.infoArr.length - 1] = obj;
            // } else {
            // curCustomer.value.infoArr.push(obj);
            // }
            nextTick(() => {
              contentRef.value?.scrollTo({
                top: contentRef.value.scrollHeight,
                behavior: "smooth",
              });
            });
          }
        }
      } catch {}
    };
    socket.onopen = function (event) {
      if (callback) {
        callback();
      }
      //发送心跳
      clearInterval(timerInterVal);
      timerInterVal = setInterval((res) => {
        if (socket?.readyState === WebSocket.OPEN) {
          socket.send(JSON.stringify({ type: "ping" }));
        } else {
          clearInterval(timerInterVal);
        }
      }, 10000);
      socket.send(JSON.stringify({ type: "bind", id: currentId })); //绑定聊天对象
      if (curCustomer.value) {
        curCustomer.value.infoArr.push({
          type: "tips",
          content: `连接已开启`,
        });
        nextTick(() => {
          contentRef.value?.scrollTo({
            top: contentRef.value.scrollHeight,
            behavior: "smooth",
          });
        });
      }
    };
    socket.onclose = function (event) {
      if (curCustomer.value) {
        curCustomer.value.infoArr.push({
          type: "tips",
          content: `连接已断开`,
        });
        nextTick(() => {
          contentRef.value?.scrollTo({
            top: contentRef.value.scrollHeight,
            behavior: "smooth",
          });
        });
      }
    };
    socket.onerror = function (error) {
      clearTimeout(timer);
      //   loading.value = false;
      networkErroshibrMsg();
    };
  } else {
    alert("你的浏览器不支持WebSocket");
  }
};
const upLoadImgs = (file) => {
  return new Promise((resolve, reject) => {
    let formData = new FormData();
    formData.append("file", file);
    const isLt = file.size / 1024;
    if (isLt > 300) {
      // ElNotification({
      //   title: "发送失败",
      //   message: "上传文件大小不能超过 300KB!",
      //   type: "warning",
      // });
      EventBus.emit('openToastBox', ["上传文件大小不能超过 300KB！"])
      reject("文件过大");
      return false;
    }
    uploadImg(formData)
      .then((res) => {
        resolve(res);
      })
      .catch(() => {
        reject();
      });
  });
};
const chooseImg = (role) => {
  let input = document.createElement("input");
  input.setAttribute("type", "file");
  // 支持多选
  input.setAttribute("multiple", "multiple");
  input.accept = "image/*";
  input.addEventListener("change", async (e) => {
    // let file = e.path[0].files[0];
    let file = e.currentTarget.files[0];
    upLoadImgs(file)
      .then((resData) => {
        let res = JSON.parse(resData.data.value);
        if (res?.code === 200) {
        const runtimeInfo = useRuntimeConfig()
        let fileUploadUrl = runtimeInfo.public.fileUploadUrl
          let imgSrc =
          fileUploadUrl + res?.src;
          //   console.log(imgSrc);
          // 浏览器兼容性处理（有的浏览器仅存在 Window.URL）
          const windowURL = window.URL || window.webkitURL;
          // createObjectURL 函数会根据传入的参数创建一个指向该参数对象的URL
          // let filePath = windowURL.createObjectURL(file);

          //   let tmp_imgDom = document.createElement("img");
          //   tmp_imgDom.setAttribute("src", imgSrc);
          //   // tmp_imgDom.setAttribute("height", 120);
          //   tmp_imgDom.setAttribute("preview", true);
          //   tmp_imgDom.style.cursor = "pointer";

          //   let tmp_divDom = document.createElement("div");
          //   tmp_divDom.appendChild(tmp_imgDom);
          // 发送给后端
          sendMsgToServe({
            message: imgSrc,
            messageType: "img",
            mode: "single",
            receive_id: curCustomer.value.tokenId, //用户类型
            type: "chat",
            sendId: currentId
          });
          // curCustomer.value.infoArr.push({
          //   type: "rightinfo",
          //   time: getTodayTime(),
          //   name: "robot",
          //   content: imgSrc,
          //   messageType: "img",
          // });
          // nextTick(() => {
          //   contentRef.value?.scrollTo({
          //     top: contentRef.value.scrollHeight,
          //     behavior: "smooth",
          //   });
          // });
        } else {
          // ElNotification({
          //   title: "发送失败",
          //   message: res.msg,
          //   type: "error",
          // });
          EventBus.emit('openToastBox', ["发送失败！"])
        }
      })
      .catch((error) => {
        if (error !== "文件过大") {
          // ElNotification({
          //   title: "",
          //   message: "发送失败",
          //   type: "error",
          // });
          EventBus.emit('openToastBox', ["发送失败！"])
        }
      });
  });
  input.click();
};

const sendMsgToServe = (obj, isShow = true) => {
  var inofObj = {
    type: "rightinfo",
    time: getTodayTime(),
    content: obj.message,
    messageType: obj.messageType,
  };
  if (socket?.readyState === WebSocket.OPEN) {
    // 发送给后端
    socket.send(JSON.stringify(obj));
    isShow && curCustomer.value.infoArr.push(inofObj);
  } else {
    initWebsoket(() => {
      if (socket?.readyState === WebSocket.OPEN) {
        // clearTimeout(timer);
        // showTimer();
        socket.send(JSON.stringify(obj));
        isShow && curCustomer.value.infoArr.push(inofObj);
      } else {
        clearTimeout(timer);
      }
      //   loading.value = false;
    });
  }
  if (isShow) {
    nextTick(() => {
      contentRef.value?.scrollTo({
        top: contentRef.value.scrollHeight,
        behavior: "smooth",
      });
    });
  }
};
const lastMessage = (arr) => {
  // 最新一条消息
  let len = arr.length;
  return arr[len - 1];
};
const chooseCustomer = (item) => {
  item.isRead = true;
  customerList.value.forEach((element) => {
    if (item.tokenId === element.tokenId) {
      element.isRead = true;
      curCustomer.value = element;
    }
  });
  nextTick(() => {
    contentRef.value?.scrollTo({
      top: contentRef.value.scrollHeight,
      behavior: "smooth",
    });
  });
};
const handleClickBox = () => {
  curCustomer.value.isRead = true;
};
let curListPage = 1;
// 获取聊天列表及最新消息
const initQueryList = () => {
  queryChatList({
    user_id: currentId,
    page: curListPage
  }).then((res) => {
    let resData = JSON.parse(res.data.value);
    if (resData.code === 200) {
      let tempArr = (resData?.result?.data || []).map((dd) => {
        let infoArr = (dd.msg || []).reverse().map((ee) => ({
          type: ee.message_type === "tips"
              ? "tips"
              : ee.send_id === currentId ? 'rightinfo' : 'leftinfo',
          time: ee.create_time,
          name: "robot",
          content: ee.message,
          messageType: ee.message_type,
        }));
        return {
          name: `客户(${dd.send_id})`,
          infoArr,
          tokenId: dd.send_id,
          isRead: true,
          page: 2,
        };
      });
      customerList.value = [...customerList.value, ...tempArr]
      curListPage++
    }
  });
};
// 获取聊天详情
const initQueryListDetail = () => {
  loadingDetail.value = true;
  queryChatList({
    user_id: currentId,
    receive_id: curCustomer.value.tokenId,
    page: curCustomer.value.page,
    limit: 10,
  }).then((res) => {
    if (res.status === 200) {
      loadingDetail.value = false;
      let resData = JSON.parse(res.data);
      if (resData?.result?.data.length > 0) {
        let temArr = (resData?.result?.data || []).reverse().map((ee) => ({
          type:
            ee.send_id === currentId
              ? "rightinfo"
              : ee.message_type === "tips"
              ? "tips"
              : "leftinfo",
          time: ee.create_time,
          name: "robot",
          content: ee.message,
          messageType: ee.message_type,
        }));
        curCustomer.value.infoArr = [...temArr, ...curCustomer.value.infoArr];
        curCustomer.value.page++;
      } else {
        curCustomer.value.isAll = true;
      }
    }
  });
};
const loadingDetail = ref(false);
const handleClickMore = () => {
  if (loadingDetail.value || curCustomer.value.isAll) {
    return;
  }
  initQueryListDetail();
}
onMounted(() => {
  initWebsoket();
  nextTick(() => {
    initQueryList();
  })
});
onBeforeUnmount(() => {
  clearInterval(timerInterVal);
  socket?.close();
});
</script>

<style lang="scss" scoped>
.customerService-box-outer {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  .customerService-box {
    width: 900px;
    height: 650px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    .customer-list {
      width: 260px;
      display: flex;
      flex-direction: column;
      border-right: 1px solid #d1d1d1;
      .search-content {
        width: 100%;
        background: #fff;
        padding: 16px;
        box-sizing: border-box;
        :deep(.el-input__wrapper) {
          box-shadow: none;
          background-color: #eee;
        }
      }
      .customer-list-content {
        flex: 1;
        background: #eee;
        overflow: auto;
        li {
          padding: 16px;
          box-sizing: border-box;
          display: flex;
          cursor: pointer;
          position: relative;
          &:hover {
            background: #ddd;
          }
          > img {
            width: 34px;
            height: 34px;
            border-radius: 2px;
          }
          .customer-item-info {
            width: 0;
            flex: 1;
            display: flex;
            .info-left {
              width: calc(100% - 42px);
            }
            .info-left-content {
              color: #999;
            }
          }
          .info-right-message-count {
            border-radius: 90px;
            background-color: rgb(250, 95, 95);
            color: #fff;
            // padding: 0 4px;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            position: absolute;
            // top: 10px;
            // left: 38px;
            top: 16px;
            left: 43px;
            line-height: 14px;
          }
        }
        .active-li {
          background: #ccc;
        }
      }
    }
    .box {
      // width: 100%;
      // height: 100%;
      flex: 1;
      background-color: #fafafa;
      position: relative;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      .title {
        border-bottom: 1px solid #d1d1d1;
        background: #fff;
        .title-text {
          font-weight: bold;
          line-height: 56px;
          font-size: 16px;
          max-width: 300px;
          display: inline-block;
        }
      }
      .content-info {
        flex: 1;
        overflow-y: auto;
        font-size: 14px;
        width: 100%;
        padding: 16px 20px;
        box-sizing: border-box;
        &::-webkit-scrollbar {
          width: 6px;
          height: 6px;
          background: transparent;
        }

        &::-webkit-scrollbar-thumb {
          background: transparent;
          border-radius: 4px;
        }

        &:hover::-webkit-scrollbar-thumb {
          background: hsla(0, 0%, 53%, 0.4);
        }

        &:hover::-webkit-scrollbar-track {
          background: hsla(0, 0%, 53%, 0.1);
        }
        .content-info-item {
          & + .content-info-item {
            margin-top: 20px;
          }
        }
        .info_default {
          & + .info_default {
            margin-top: 20px;
          }
        }
        .avatar {
          width: 34px;
          height: 34px;
          border-radius: 10px;
        }
        .circle {
          display: inline-block;
          width: 34px;
          height: 34px;
          border-radius: 50%;
          background-color: #eff1f3;
        }
        .con_text {
          color: #333;
          margin-bottom: 5px;
          width: 100%;
          .img-box {
            max-width: 100%;
          }
        }
        .con_que {
          height: 30px;
          line-height: 30px;
          cursor: pointer;
        }
        .info_r {
          position: relative;
          display: flex;
          .info_r_content {
            display: inline-block;
            margin-left: 16px;
            .robot-name {
              margin-bottom: 4px;
              color: #999;
              max-width: 300px;
            }
            .circle_r {
              position: absolute;
              left: 0%;
            }
            .pic_r {
              width: 17px;
              height: 17px;
              margin: 8px;
            }
            .con_r {
              background-color: #eee;
              border-radius: 6px;
              padding: 10px;
              box-sizing: border-box;
              overflow: auto;
            }
            .time_r {
              color: #999;
              font-size: 12px;
            }
          }
        }
        .info_l {
          display: flex;
          justify-content: flex-end;
          .info_l_content {
            margin-right: 16px;
          }
          .pic_l {
            width: 13px;
            height: 17px;
            margin: 8px 10px;
          }
          .time_l {
            color: #999999;
            font-size: 12px;
            margin-top: 5px;
            text-align: right;
          }
          .con_l {
            display: inline-block;
            width: 100%;
            background-color: #e62e3c;
            border-radius: 6px;
            padding: 10px;
            color: #fff;
            box-sizing: border-box;
          }
        }
        .info-tips {
          text-align: center;
          font-size: 12px;
          color: #ccc;
        }
        .click-more{
          cursor: pointer;
        }
        #question {
          cursor: pointer;
        }
        .pedding-text {
          text-align: center;
        }
      }
      .setproblem {
        width: 100%;
        background-color: #ffffff;
        position: relative;
        :deep(.el-textarea) {
          .el-textarea__inner {
            box-shadow: none !important;
            border-radius: 8px;
          }
        }
      }
      .setproblem button {
        position: absolute;
        right: 5%;
        bottom: 20px;
        background-color: #e62e3c;
        border: none;
      }
      .question-msg {
        float: left;
        font-size: 14px;
        color: #3c9cf3;
      }
      .messag-loading {
        color: #ccc;
        font-size: 12px;
        position: absolute;
        bottom: 158px;
        left: 50%;
        transform: translateX(-50%);
      }
      .common-info {
        display: flex;
        .common-item {
          border: 1px solid #ccc;
          border-radius: 8px;
          padding: 2px 4px;
          background: #fff;
          color: #aaa;
          cursor: pointer;
          // & + .common-item{
          margin-left: 8px;
          // }
        }
      }
      .tool-bar {
        display: flex;
        align-items: center;
        background: #fff;
        border-bottom: 1px solid #ccc;
        height: 32px;
        padding-left: 8px;
        font-size: 18px;

        .svg-icon {
          width: 16px;
          font-size: 16px;
          cursor: pointer;
        }
        .mgl-16 {
          margin-left: 12px;
        }
      }
    }
    .box-noselect {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #999;
      font-size: 24px;
    }
  }
}
</style>
